<div class="loading" *ngIf="!emittedFirst" class="hero-list-component">
    <mat-spinner class="app-spinner"></mat-spinner>
</div>

<mat-list class="hero-list-component">
    <mat-list-item *ngFor="let hero of heroes$ | asyncNoZone as heroes; index as i" class="listHero">
        <div class="color-box" [style.background-color]="hero.color"></div>
        <div class="name">
          {{hero.name}}
          <div class="life">
            <div class="currentPercent" [style.width]="hero.hpPercent() + '%'"></div>
          </div>
        </div>
        <div class="actions">
            <i class="fa fa-pencil-square-o" aria-hidden="true" (click)="editHero(hero)"></i>
            <i class="fa fa-trash-o" aria-hidden="true" (click)="deleteHero(hero)"></i>
        </div>
    </mat-list-item>
</mat-list>
